import {DecoupledEditor} from '@ckeditor/ckeditor5-editor-decoupled';
//引入编辑器中文包
// import 'ckeditor5/build/translations/zh-cn'
//必要:段落插件
import {Paragraph} from '@ckeditor/ckeditor5-paragraph'
// 必须此插件支持剪贴板、输入、全选、ShiftEnter、键入和撤消支持
import {Essentials} from '@ckeditor/ckeditor5-essentials'
import {
    Bold, // 加粗
    Italic, // 斜体
    Strikethrough, // 删除线
    Underline, // 下划线
    Subscript, // 下标
    Superscript, // 上标
    Code // 行内代码
} from '@ckeditor/ckeditor5-basic-styles'
import {BlockQuote} from '@ckeditor/ckeditor5-block-quote' // 块引用插件
import '@ckeditor/ckeditor5-block-quote/build/translations/zh-cn' // 块引用中文包
import {
    FontFamily,
    FontSize,
    FontColor,
    FontBackgroundColor,
} from '@ckeditor/ckeditor5-font' // 字体插件
import {Alignment} from '@ckeditor/ckeditor5-alignment' // 文本对齐插件
import {HorizontalLine} from '@ckeditor/ckeditor5-horizontal-line' // 水平线插件
import {
    Heading,
    Title
} from '@ckeditor/ckeditor5-heading' // 标题插件
import {
    TodoList, // 待办事项列表插件
    ListProperties, // 列表插件
} from '@ckeditor/ckeditor5-list'
import {
    Indent, // 缩进插件（列表）
    IndentBlock, // 缩进插件（块：段落，标题）
} from '@ckeditor/ckeditor5-indent'
import {CodeBlock} from '@ckeditor/ckeditor5-code-block' // 代码块插件
import {FindAndReplace} from '@ckeditor/ckeditor5-find-and-replace' // 查找替换插件
import {
    Table, // 表格插件
    TableToolbar, // 表格工具栏插件
    TableProperties, // 表属性插件
    TableCellProperties, // 单元格属性插件
    TableColumnResize, // 调整表列宽度插件
    TableCaption // 表标题插件
} from '@ckeditor/ckeditor5-table'

import {Link} from '@ckeditor/ckeditor5-link' // 链接插件
import {Autoformat} from '@ckeditor/ckeditor5-autoformat' // 自动格式转换插件
import {RemoveFormat} from '@ckeditor/ckeditor5-remove-format'  // 删除格式插件
import {LinkImage} from '@ckeditor/ckeditor5-link' // 图像链接插件
import {
    Image, // 图像插件
    ImageResize,
    ImageToolbar, // 图像工具栏插件
    ImageCaption, // 图像标题插件

    ImageInsert, // 插入图像插件
    AutoImage, ImageStyle // 自动图像插件
} from '@ckeditor/ckeditor5-image'
import {SimpleUploadAdapter} from "@ckeditor/ckeditor5-upload"
import {Markdown} from '@ckeditor/ckeditor5-markdown-gfm' // Markdown 输出插件
export const editorType = DecoupledEditor


export const editorConfig = () => {
    return {

        language: 'zh-cn',
        plugins: [
            Paragraph,
            Essentials,
            Bold, // 加粗
            Italic, // 斜体
            Strikethrough, // 删除线
            Underline, // 下划线
            Subscript, // 下标
            Superscript, // 上标
            Code,// 行内代码
            BlockQuote, // 块引用插件
            FontFamily,
            FontSize,
            FontColor,
            FontBackgroundColor,
            Alignment, // 文本对齐插件
            HorizontalLine, // 水平线插件
            Heading,
            Title,
            TodoList, // 待办事项列表插件
            ListProperties, // 列表插件
            Indent, // 缩进插件（列表）
            IndentBlock, // 缩进插件（块：段落，标题）
            CodeBlock,
            FindAndReplace,
            Table, // 表格插件
            TableToolbar, // 表工具栏
            TableProperties, // 表属性插件
            TableCellProperties, // 单元格属性插件
            TableColumnResize, // 调整表列宽度插件
            TableCaption, // 表标题插件
            Link,
            Autoformat,
            RemoveFormat,
            Image, // 图像插件
            ImageToolbar, // 图像工具栏插件
            ImageStyle,
            ImageCaption, // 图像标题插件
            ImageInsert, // 插入图像插件
            AutoImage, // 自动图像插件
            LinkImage, // 图像链接插件
            ImageResize,
            SimpleUploadAdapter,
            Markdown
        ],
        toolbar: [
            'undo',
            'redo',
            'selectAll',
            'bold', // 加粗
            'italic', // 斜体
            'strikethrough', // 删除线
            'underline', // 下划线
            'superscript', // 上标
            'subscript', // 下标
            'code', // 行内代码
            'blockQuote', // 块引用
            'fontFamily', // 字体
            'fontSize', // 字体大小
            'fontColor', // 字体色插件
            'fontBackgroundColor', // 字体背景颜色
            'alignment', // 文本对齐
            'horizontalLine', // 水平线
            'heading',
            'bulletedList', // 无序列表
            'numberedList', // 有序列表
            'todolist', // 待办事项列表
            'outdent', // 减少缩进
            'indent', // 增加缩进
            'codeBlock', // 代码块
            'findAndReplace', // 查找替换
            'insertTable', // 插入表格
            'link', // 链接
            'RemoveFormat',
            'uploadImage', // 上传图像
            'insertImage', // 插入图像
        ],
        fontFamily: {
            options: [
                'default',
                '黑体',
                '楷体',
                '宋体',
                'Consolas',
                'Arial, sans-serif',
                'Courier New, Courier, monospace'
            ],
            supportAllValues: true
        },
        fontSize: {
            supportAllValues: true,
            options: [
                '12',
                '16',
                '24',
                '32',
            ]
        },
        fontColor: {
            columns: 5, // 颜色展示的列数
            documentColors: 5, // 文档中使用的颜色数量
            colors: [
                {color: '#000000', label: '黑色'},
                {color: '#D8DAD9', label: '灰色'},
                {color: '#FFFFFF', label: '白色'},
                {color: '#DF2A3F', label: '红色'},
                {color: '#ED740C', label: '橘橙'},
                {color: '#ECAA04', label: '金盏黄'},
                {color: '#FBDE28', label: '柠檬黄'},
                {color: '#74B602', label: '绿色'},
                {color: '#1DC0C9', label: '青色'},
                {color: '#117CEE', label: '浅蓝'},
                {color: '#2F4BDA', label: '蓝色'},
                {color: '#601BDE', label: '紫色'},
                {color: '#D22D8D', label: '玫红'},
            ],
        },
        fontBackgroundColor: {
            columns: 5, // 颜色展示的列数
            documentColors: 5, // 文档中使用的颜色数量
            colors: [
                {color: '#000000', label: '黑色'},
                {color: '#262626', label: '深灰 3'},
                {color: '#585A5A', label: '深灰 2'},
                {color: '#8A8F8D', label: '深灰 1'},
                {color: '#D8DAD9', label: '灰色'},
                {color: '#E7E9E8', label: '浅灰 4'},
                {color: '#EFF0F0', label: '浅灰 3'},
                {color: '#F4F5F5', label: '浅灰 2'},
                {color: '#FAFAFA', label: '浅灰 1'},
                {color: '#FFFFFF', label: '白色'},

                {color: '#DF2A3F', label: '红色'},
                {color: '#ED740C', label: '橘橙'},
                {color: '#ECAA04', label: '金盏黄'},
                {color: '#FBDE28', label: '柠檬黄'},
                {color: '#74B602', label: '绿色'},
                {color: '#1DC0C9', label: '青色'},
                {color: '#117CEE', label: '浅蓝'},
                {color: '#2F4BDA', label: '蓝色'},
                {color: '#601BDE', label: '紫色'},
                {color: '#D22D8D', label: '玫红'},

                {color: '#FBE4E7', label: '红色 1'},
                {color: '#FDE6D3', label: '橘橙 1'},
                {color: '#F9EFCD', label: '金盏黄 1'},
                {color: '#FBF5CB', label: '柠檬黄 1'},
                {color: '#E8F7CF', label: '绿色 1'},
                {color: '#CEF5F7', label: '青色 1'},
                {color: '#D9EAFC', label: '浅蓝 1'},
                {color: '#D9DFFC', label: '蓝色 1'},
                {color: '#E6DCF9', label: '紫色 1'},
                {color: '#FBDFEF', label: '玫红 1'},

                {color: '#F1A2AB', label: '红色 2'},
                {color: '#F8B881', label: '橘橙 2'},
                {color: '#F5D480', label: '金盏黄 2'},
                {color: '#FCE75A', label: '柠檬黄 2'},
                {color: '#C1E77E', label: '绿色 2'},
                {color: '#81DFE4', label: '青色 2'},
                {color: '#81BBF8', label: '浅蓝 2'},
                {color: '#96A7FD', label: '蓝色 2'},
                {color: '#BA9BF2', label: '紫色 2'},
                {color: '#F297CC', label: '玫红 2'},

                {color: '#E4495B', label: '红色 3'},
                {color: '#F38F39', label: '橘橙 3'},
                {color: '#F3BB2F', label: '金盏黄 3'},
                {color: '#EDCE02', label: '柠檬黄 3'},
                {color: '#8CCF17', label: '绿色 3'},
                {color: '#01B2BC', label: '青色 3'},
                {color: '#2F8EF4', label: '浅蓝 3'},
                {color: '#4861E0', label: '蓝色 3'},
                {color: '#7E45E8', label: '紫色 3'},
                {color: '#E746A4', label: '玫红 3'},

                {color: '#AD1A2B', label: '红色 4'},
                {color: '#C75C00', label: '橘橙 4'},
                {color: '#C99103', label: '金盏黄 4'},
                {color: '#A58F04', label: '柠檬黄 4'},
                {color: '#5C8D07', label: '绿色 4'},
                {color: '#07787E', label: '青色 4'},
                {color: '#0C68CA', label: '浅蓝 4'},
                {color: '#213BC0', label: '蓝色 4'},
                {color: '#4C16B1', label: '紫色 4'},
                {color: '#AE146E', label: '玫红 4'},

                {color: '#70000D', label: '红色 5'},
                {color: '#663000', label: '橘橙 5'},
                {color: '#664900', label: '金盏黄 5'},
                {color: '#665800', label: '柠檬黄 5'},
                {color: '#2A4200', label: '绿色 5'},
                {color: '#004347', label: '青色 5'},
                {color: '#00346B', label: '浅蓝 5'},
                {color: '#101E60', label: '蓝色 5'},
                {color: '#270070', label: '紫色 5'},
                {color: '#5C0036', label: '玫红 5'}
            ]
        },
        alignment: {
            options: [
                'left', // 左对齐
                'right', // 右对齐
                'center', // 水平居中对齐
                'justify'
            ]
        },
        title: {
            placeholder: "请输入帖子标题"
        },
        placeholder: "请输入帖子内容",
        heading: {
            options: [
                {model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph'},
                {model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1'},
                {model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2'},
                {model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3'},
                {model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4'},
                {model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5'},
                {model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6'},
                /*  // 自定义
                  {
                      model: 'customParagraph',
                      title: '段落 - 蓝色 - 斜体', // 下拉框的选项显示文本
                      class: 'custom_p_blue_italic', // 下拉框的选项显示文本样式
                      converterPriority: 'high', // 转换级别高
                      // 渲染后的元素
                      view: {
                          name: 'p', // 段落元素
                          styles: {
                              'font-size': '9px',
                              'color': '#3058cf',
                              'font-style': 'italic'
                          }
                      }
                  }*/
            ]
        },
        indentBlock: {
            offset: 4,  // 缩进量
            unit: 'rem' // 缩进单位
        },
        table: {
            // 新建表格默认 1 行 1 列 为表头
            defaultHeadings: {rows: 1, columns: 1},
            // 表工具栏（气球）
            contentToolbar: [
                'toggleTableCaption', // 打开/关闭表标题
                '|',
                'tableColumn', // 表列设置
                'tableRow', // 表行设置
                'mergeTableCells', // 合并单元格
                '|',
                'tableProperties', // 表属性
                'tableCellProperties', // 单元格属性
            ],
            // 表属性配置

        },
        link: {
            // addTargetToExternalLinks: true, // 编辑器创建新的超链接自动添加 target='_blank' 和 rel 属性
            defaultProtocol: 'http://', // 默认的网络协议
            decorators: {
                // 是否已新标签页打开链接
                linkTarget: {
                    mode: 'manual', // 手动模式
                    label: '是否已新标签页打开链接？',
                    defaultValue: true, // 开关已打开
                    attributes: {
                        target: '_blank', // 开关打开状态下，给链接添加的属性值
                    }
                },
                // 绿色的链接
                linkGreen: {
                    mode: 'automatic', // 自动模式
                    callback: url => {
                        // 判断链接地址是否是 https 网络协议
                        if (url.indexOf('https://') !== -1) {
                            return true
                        }
                        return false
                    },
                    attributes: {
                        style: 'color: green', // 如果是 https 网络协议，将链接变成绿色
                    }
                }
            }
        },
        image: {
            toolbar: [
                'imageStyle:inline',
                'imageStyle:alignLeft',
                'imageStyle:alignRight',
                '|',
                'imageStyle:alignBlockLeft',
                'imageStyle:alignBlockRight',
                'imageStyle:alignCenter',
                '|',
                'imageStyle:round',

            ],
            styles: {
                options: [
                    // 包含哪些预留的图像样式
                    'inline',
                    'alignBlockLeft',
                    'alignBlockRight',
                    'alignCenter',
                    // 改变预留图像样式（提示语句）
                    {name: 'alignLeft', title: '图片悬浮左对齐'},
                    {name: 'alignRight', title: '图片悬浮右对齐'},
                    // 自定义图片样式（圆角、头像）
                    {
                        name: 'round', // 名称
                        icon: 'inline', // 使用预留的图标名
                        title: '圆角', // 提示语句
                        modelElements: ['imageInline'], // 内联图像：是内联还是块（必选）
                        className: ['round-image'], // 应用的图像类名
                    },

                ]
            },
        },
        simpleUpload: {
            uploadUrl: '/api/ckeditor/upload', // 上传图像服务器地址（可能需要解决跨域问题），moreUrls=1 可生成多链接图像
            headers: {
                token: 'eyJhbGciOiJIUzUxMiIsInppcCI6IkdaSVAifQ.H4sIAAAAAAAA_6tWKi5NUrJSiox099ANDXYNUtJRSq0oULIyNDc0MLM0Nzc21FEqSKzMyU9MASqrjlEqLU4t8kyJUXIw04FwQioLUoHcGCV_NzcfTz_XGCWoRF5iLkTC0NLU0NLCwNDE1CBGqVapFgBh94OwdQAAAA.CrV7IwbMeSBomnhZ5_FdDtLfiKTgsJm9s5n_HHNBE_Q1AWaHB6Plf5voL7-ESBr0TGaAM37Yt9KREIR6qH2ycA', // 请求头设置来验证身份的（自己定义属性）
            }
        },
    }

}

/*
list 要先有缩进才有用
list插件有点不对
代码块样式也有点奇怪
代码块也有点小问题
table 用起来也有点奇怪
图片插件是可以的
应该还要配置一下tab缩进的快捷键
*/